<template>
  <div class="main_box">
    <CommonHeader title="以事找人重点任务" />
    <div class="detail_box">
      <div class="header">
        <h3 class="title">{{ quotaInfo.title }}</h3>
        <p class="article">批示内容：{{ quotaInfo.content }}</p>
        <p class="date">批示时间：{{ quotaInfo.date }}</p>
      </div>
      <div class="content">
        <div class="head">{{ leader.title }}</div>
        <div class="table_content">
          <div class="table_thead">
            <div class="th">承接领导</div>
            <div class="th">职务</div>
            <div class="th">状态</div>
          </div>
          <div class="table_tbody" v-for="item in leader.persons" :key="item.index" @click="toDetail(item.status)">
            <div class="td">{{ item.name }}</div>
            <div class="td">{{ item.position }}</div>
            <div class="td red">{{ formateState(item.status) }}</div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="head">{{ member.title }}</div>
        <div class="table_content">
          <div class="table_thead">
            <div class="th">承接领导</div>
            <div class="th">职务</div>
            <div class="th">状态</div>
          </div>
          <div class="table_tbody" v-for="item in member.persons" :key="item.index" @click="toDetail(item.status)">
            <div class="td">{{ item.name }}</div>
            <div class="td">{{ item.position }}</div>
            <div class="td red">{{ formateState(item.status) }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="file_box">
      <div class="file_item" @click="downloadFile(fileInfo.filePath)">
        <i class="file_icon pdf"></i>
        <div class="content">{{ fileInfo.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader';
import feedbackMemberData from './mkFeedbackMember';

export default {
  name: 'LeaderDetail',
  components: {
    CommonHeader,
  },
  data() {
    return {
      quotaInfo: {},
      fileInfo: {},
      leader: {},
      member: {},
    };
  },
  computed: {
    formateState() {
      return function (state) {
        switch (state) {
          case '1':
            return '待反馈';
          default:
            return '已反馈';
        }
      };
    },
  },
  created() {
    this.initData(this.$route.query.id | 1);
  },
  methods: {
    initData: function (id) {
      this.quotaInfo = feedbackMemberData.find((s) => s.id == id);
      this.fileInfo = this.quotaInfo.fileInfo;
      this.leader = {
        title: '主要领导（阅研）',
        persons: this.quotaInfo.persons.filter((s) => s.level == 1),
      };
      this.member = {
        title: '责任领导（承接）',
        persons: this.quotaInfo.persons.filter((s) => s.level == 2),
      };
    },
    toDetail(status) {
      this.$router.push({
        path: '/feedbackDetailLead',
        query: {
          ...this.quotaInfo,
          status,
        },
      });
    },
    downloadFile(url) {
      window.open(url, '_blank');
    },
  },
};
</script>

<style scoped>
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
}
.detail_box {
  width: 100%;
  height: calc(100vh - 160px);
  padding: 10px 15px;
  box-sizing: border-box;
  overflow-y: auto;
}
.detail_box .content {
  margin-bottom: 10px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  background-color: #fff;
  border-radius: 8px;
  text-align: left;
}
.detail_box .content .head {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  padding-left: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  position: relative;
}
.detail_box .header .title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #151212;
}
.detail_box .header .article {
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  color: #999;
}
.detail_box .header .date {
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  color: #999;
}
.detail_box .content .head::before {
  content: '';
  display: block;
  width: 4px;
  height: 18px;
  background-color: #367fff;
  position: absolute;
  left: 0;
  top: 3px;
}
.detail_box .content .table_content {
  border-top: 1px solid #efefef;
}
.table_thead,
.table_tbody {
  display: flex;
  padding: 10px;
  color: #d3d7e0;
  box-sizing: border-box;
  border-bottom: 1px solid #efefef;
}
.table_thead .th,
.table_tbody .td {
  width: 33.3%;
  text-align: center;
  box-sizing: border-box;
}
.table_tbody .td {
  color: #a3a7ad;
}
.table_tbody .td.blue {
  color: #4ca5f1;
}
.table_tbody .td.red {
  color: #f60e36;
}
.file_box {
  position: fixed;
  left: 0;
  bottom: 20px;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}
.file_box .file_item {
  display: flex;
  font-size: 14px;
  color: #2a81e6;
  padding: 10px 15px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 3px 3px 3px #dcdcdc;
}
.file_box .file_item .content {
  width: calc(100% - 60px);
  height: 30px;
  line-height: 30px;
  text-align: left;
  padding: 0 10px;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file_box .file_item .file_icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url('../../assets/image/file.png') no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.file_box .file_item .file_icon.pdf {
  background: url('../../assets/image/Pdf.png') no-repeat;
  background-size: 100% 100%;
}
.file_box .file_item .file_icon.word {
  background: url('../../assets/image/word.png') no-repeat;
  background-size: 100% 100%;
}
.file_box .file_item .file_icon.excel {
  background: url('../../assets/image/excel.png') no-repeat;
  background-size: 100% 100%;
}
</style>
